<template>
  <el-container style="background-color:#f0f3f4">
    <el-header style="background-color:#ffff" v-show="isShowBtn == 1">
      <tool-bar :pageFrom="pageFrom" ref="toolbar"></tool-bar>
    </el-header>
    <el-main justify="center" align="middle" class="el-main">
      <!--主要区域容器-->
      <div v-if="showFrmType == 0">
        <FrmFool
          :PFrmData="flowData"
          :isReadonlyExt="isReadonlyExt"
          :isReadonly="isReadonly"
          :mainData="mainData"
          ref="FrmFool"
        ></FrmFool>
      </div>
      <div v-else-if="showFrmType == 1">
        <FrmDevelop
          :PFrmData="flowData"
          :isReadonlyExt="isReadonlyExt"
          :isReadonly="isReadonly"
          :mainData="mainData"
          ref="FrmDevelop"
        ></FrmDevelop>
      </div>
      <div v-else>
        <FrmTree></FrmTree>
      </div>
      <!--<el-form v-if="node.FormType===0 || node.FormType===10" id="FrmFool">
          <div v-for="gf in groupFields" v-bind:key="gf.OID">
              <div style="text-align: left">{{gf.Lab}}</div>npm
              <el-divider></el-divider>
              <template v-if="gf.CtrlType == '' || gf.CtrlType == null">
                  <MapAttrForm
                          :mainData="gf.mainData"
                          :mapAttrs="gf.MapAttrs"
                          @on-mainData-change="ChangeMainData">
                  </MapAttrForm>
              </template>
              <template v-if="gf.CtrlType=='Ath'">
                 <Ath></Ath>
              </template>
          </div>
      </el-form>
       <el-form v-else-if="node.FormType===1" id="FrmFree">
              自由表单
      </el-form>
       <el-form v-else-if="node.FormType===5" >
              树形表单
      </el-form>
       <el-form v-if="node.FormType===12" id="FrmDevelop"  v-html="developHtml" :style="{width:widthStyle}" style="background-color:#ffff;margin:0px auto;padding:5px 10px">
              开发者表单
              {{developHtml}}
      </el-form>
      <div id="divinfo" v-show="isShowDiv">
      </div>-->
    </el-main>
  </el-container>
</template>
<style src="../datetimepicker/css/bootstrap-datetimepicker.css"></style>
<style src="../datetimepicker/css/bootstrap.css"></style>
<script>
import { FlowDevModel } from '@/api/enums.js';
import ToolBar from "./components/tool-bar.vue";
import FrmFool from "./ccform/FrmFool.vue";
import FrmDevelop from "./ccform/FrmDevelop.vue";
import FrmTree from "./ccform/FrmTree.vue";

export default {
  components: {
    ToolBar,
    FrmFool,
    FrmDevelop,
    FrmTree,
  },
  data() {
    return {
      width: '900px',
      params: {}, //参数
      webUser: {},//人员信息
      node: {}, //节点属性信息
      flow: {},//流程属性信息
      mapData: {},//表单属性
      flowData: {},//表单的所有数据
      showFrmType: 0, // 表单类型   0傻瓜表单 1开发者表单 2树形结构的表单
      mainData: {},//表单数据
      developHtml: '',
      isShowDiv: false,
      isShowBtn: 1,
      pageFrom: "MyView",//流程处理器页面
      isReadonly: 1,
      isReadonlyExt: 0,
    }
  },
  computed: {
    widthStyle: function () {
      return this.flowData.Sys_MapData[0].FrmW + 'px';
    }
  },
  created() {
    this.params = this.$store.state.params;
    this.webUser = this.$store.getters.getWebUser;
    //初始化按钮
    this.isShowBtn = this.params.IsShowBtn;
    //获取表单数据
    this.GenerWorkNode();
    this.mainData = this.flowData.MainTable[0];
    this.mapAttrs = this.flowData.Sys_MapAttr;
    this.mapExts = this.flowData.Sys_MapExt;

  },
  methods: {
    GenerWorkNode: function () {//获取流程数据
      let handler = new this.HttpHandler("BP.WF.HttpHandler.WF_MyView");
      handler.AddJson(this.params);
      let data = handler.DoMethodReturnString("GenerWorkNode")
      if (data.indexOf('err@') == 0) {
        console.log(data);
        this.$alert("获取表单数据失败,请查看控制台日志,或者联系管理员.", {
          dangerouslyUseHTMLString: true
        });
        return;
      }
      try {
        this.flowData = JSON.parse(data);
      } catch (err) {
        console.log(data);
        this.$alert(" GenerWorkNode转换JSON失败,请查看控制台日志,或者联系管理员.", {
          dangerouslyUseHTMLString: true
        });
        return;
      }
      //消息提醒
      let alertMsgEle = "";
      let title = "";
      /*let count = 1;
      this.flowData.AlertMsg.forEach(alertMsg => {
        let _html = '<div>';
        _html += '<span class="titleAlertSpan"> ' + (count++) + "&nbsp;&nbsp;&nbsp;" + alertMsg.Title + '</span>';
        _html += '<div>' + alertMsg.Msg + '</div>';
        _html += '</div>';
        alertMsgEle += _html;
        title = alertMsg.Title;
      });*/

      if (this.flowData.AlertMsg.length != 0) {
        this.$alert(alertMsgEle, title, {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true

        });
      }
      this.InitData();
    },

    InitData: function () {  //初始化数据
      //节点属性
      this.node = this.flowData.WF_Node != null && this.flowData.WF_Node != undefined ? this.flowData.WF_Node[0] : null;
      //流程属性
      this.flow = this.flowData.WF_Flow != null && this.flowData.WF_Flow != undefined ? this.flowData.WF_Flow[0] : null;
      //表单属性
      this.mapData = this.flowData.Sys_MapData[0];
      //标题
      this.title = this.node != null ? this.node.Name : this.mapData.Name;
      //表单数据
      this.mainData = this.flowData.MainTable[0];
      let frmNode = this.flowData.WF_FrmNode != null && this.flowData.WF_FrmNode != undefined ? this.flowData.WF_FrmNode[0] : null;
      //解析表单的类型
      let flowDevModel = this.GetPara(this.flow.AtPara, "FlowDevModel");
      flowDevModel = flowDevModel == null || flowDevModel == undefined || flowDevModel == "" ? "0" : flowDevModel;
      if ((flowDevModel == 1 || this.node.FormType == 11) && frmNode != null && frmNode.FrmSln == 1)
        this.isReadonlyExt = 1;

      //根据流程设计模式解析
      switch (parseInt(flowDevModel)) {
        case FlowDevModel.Prefessional: //专业模式
          //根据节点的表单方案解析
          switch (parseInt(this.node.FormType)) {
            case 0: //傻瓜表单
            case 10://累加表单
              this.showFrmType = 0;
              break;
            case 12://开发者表单
              this.showFrmType = 1;
              break;
            case 5://树形表单
              this.showFrmType = 2;
              break;
            case 11://表单库单表单
              if (this.mapData.FrmType == 0) //傻瓜表单
                this.showFrmType = 0;
              if (this.mapData.FrmType == 8)//开发者表单
                this.showFrmType = 1;

              break;
            default:
              this.$message.error("节点表单方案:[" + this.node.FormType + "]不存在或者暂未解析，请联系管理员")
              break;
          }
          break;
        case FlowDevModel.JiJian://极简模式(傻瓜表单)
          if (this.mapData.FrmType == 0) //傻瓜表单
            this.showFrmType = 0;
          if (this.mapData.FrmType == 8)//开发者表单
            this.showFrmType = 1;
          break;
        case FlowDevModel.FoolTruck://累加模式
          this.showFrmType = 0; //傻瓜表单.
          break;
        case FlowDevModel.RefOneFrmTree://表单库单表单
          if (frmNode != null && frmNode != undefined) {
            frmNode = frmNode[0];
            if (frmNode.FrmType == 0) //傻瓜表单
              this.showFrmType = 0;
            if (frmNode.FrmType == 8)//开发者表单
              this.showFrmType = 1;
          }
          break;
        case FlowDevModel.FrmTree://表单库多表单
          this.showFrmType = 2;
          break;
        default:
          this.$message.error("流程设计模式:[" + this.flow.FlowDevModel + "]不存在或者暂未解析，请联系管理员")
          break;
      }
    }
  }
}

</script>
<style scoped>
/*
	找到html标签、body标签，和挂载的标签
	都给他们统一设置样式
*/
html,
body,
#app,
.el-container {
  /*设置内部填充为0，几个布局元素之间没有间距*/
  padding: 0px;
  /*外部间距也是如此设置*/
  margin: 0px;
  /*统一设置高度为100%*/
  height: 100%;
}

.el-header {
  width: 100%;
  height: 56px !important;
  line-height: 56px;
  padding: 0 20px 0 44px;
  background: #ffffff;
  box-shadow: 0px 4px 6px 0px rgba(231, 237, 249, 1);
  box-sizing: border-box;
  /**position: fixed;*/
  /**z-index: 0;*/
  top: 0;
}
</style>

